<template>
  <div>
    <div style="width: 100%; display: flex; justify-content: space-between;">
      <div style="width: 400px; height: 400px; border: 1px solid #333;" id="radar2"></div>
    </div>
  </div>
</template>

<script>
import { Radar } from '@antv/g2plot'

export default {
  name: 'RadarChart2',
  data () {
    return {
      // 雷达图
      radarPlot2: null,
      radarData2: [
        {
          item: '最强攻击力维度',
          user: 'a',
          score: 90
        },
        {
          item: '最强防御力维度',
          user: 'a',
          score: 90
        },
        {
          item: '最强决策力维度',
          user: 'a',
          score: 90
        },
        {
          item: '最强统率力维度',
          user: 'a',
          score: 90
        },
        {
          item: '最强战斗力维度',
          user: 'a',
          score: 90
        }
      ]
    }
  },
  created () {
    const radarData2 = JSON.parse(JSON.stringify(this.radarData2))
    radarData2.forEach(item => {
      const cloneText = item.item
      item.text = cloneText
      item.item = cloneText.slice(0, 4).concat('...')
    })
    this.radarData2 = radarData2
  },
  mounted () {
    this.renderRadar2()
  },
  methods: {
    // 生成雷达图
    renderRadar2 () {
      this.radarPlot2 = new Radar('radar2', {
        data: this.radarData2,
        // 设置 meta 数据，避免维度相等时直接显示为圆点
        meta: {
          score: {
            min: 0,
            max: 100
          }
        },
        tooltip: {
          customContent: (title, data) => {
            if (data.length) {
              return `
                <div class="radar-tooltip-box">
                   <div class="title">${data[0].data.text}</div>
                   <div class="bottom-info">
                     <span class="dot">${data[0].data.user}：</span>
                     <span class="value">${data[0].data.score}</span>
                  </div>
                </div>
              `
            }
          }
        },
        xField: 'item',
        yField: 'score',
        seriesField: 'user',
        xAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              style: {
                lineDash: null
              }
            }
          }
        },
        yAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              type: 'line',
              style: {
                lineDash: null
              }
            },
            alternateColor: 'rgba(0, 0, 0, .1)'
          }
        },
        // 开启面积
        area: {},
        point: {}
      })
      this.radarPlot2.render()
    }
  }
}
</script>

<style scoped>

</style>
